<template>
  <view class="page">
    <view class="promotion-bg">
      <image
        :src="require('@/static/img/promotion-pic.png')"
        mode="scaleFill"
        class="promotion-pic"
      />
    </view>
    <view class="main">
      <image
        @click="gotoPage(item.path)"
        v-for="(item, index) in actionTabs"
        :key="index"
        :src="item.pic"
        class="action-pic"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actionTabs: [
        {
          pic: require("@/static/img/promotion-pic2.png"),
          name: "专家咨询",
          path: "/pages/promotion/consult",
        },
        {
          pic: require("@/static/img/promotion-pic3.png"),
          name: "农业知识库",
          path: "/pages/promotion/farming-knowledge",
        },
        {
          pic: require("@/static/img/promotion-pic4.png"),
          name: "病虫知识库",
          path: "/pages/promotion/insect-knowledge",
        },
        {
          pic: require("@/static/img/promotion-pic5.png"),
          name: "友情链接",
          path: "",
        },
        {
          pic: require("@/static/img/promotion-pic6.png"),
          name: "农技服务和推广H5",
          path: "",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    gotoPage(path) {
      uni.navigateTo({
        url: path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.promotion-bg {
  position: relative;
  width: 100%;
  height: 473rpx;
  overflow: hidden;
  .promotion-pic {
    position: absolute;
    width: 850rpx;
    height: 473rpx;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }
}
.main {
  margin-top: 77rpx;
  padding: 0 30rpx;
  .action-pic {
    width: 100%;
    margin-bottom: 35rpx;
  }
}
</style>
